<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    <!--  jquery+ajax请求 -->
    $(function (){
      var $checkButton = $("#checkButton");
      //绑定事件
      $checkButton.click(function (){
        //方式一
        //发出ajax
        // $.ajax({
        //     url:"/ajax/checkUserServlet2", //别忘了逗号
        //     type:"POST",
        //     data:{
        //       username:$("#uname").val(),
        //       date:new Date()  //防止缓存
        //     },
        //     error:function (){  //失败后的回调函数
        //       console.log("失败")
        //     },
        //     success:function (data,status,xhr){
        //     console.log("$.ajax成功")
        //     console.log("data= ",data)
        //     console.log("status= ",status)
        //     console.log("xhr= ",xhr)
        //     if("" == data.username){ //已有，不可用
        //       $("#myres").val("该用户名可用")
        //     }else {
        //       $("#myres").val("该用户名不可用")
        //     }
        //     //data是json对象，要转成字符串
        //     $("#div1").html(JSON.stringify(data))
        //   },
        //   dataType:"json"
        // })

        //方式二
        // //$.get方法(按照url,data,success,datatype一次写入，不用写参数名)
        // $.get(
        //     //顺序一定不能换
        //     "/ajax/checkUserServlet2",    //url
        //   {                               //data
        //     username:$("#uname").val(),
        //     date:new Date()  //防止缓存
        //   },
        //     function (data,status,xhr){   //success
        //       console.log("$.get成功")
        //       console.log("data= ",data)
        //       console.log("status= ",status)
        //       console.log("xhr= ",xhr)
        //       if("" == data.username){ //已有，不可用
        //         $("#myres").val("该用户名可用")
        //       }else {
        //         $("#myres").val("该用户名不可用")
        //       }
        //       //data是json对象，要转成字符串
        //       $("#div1").html(JSON.stringify(data))
        //     },
        //     "json"                            //dataType
        // )
        //$.post方法(按照url,data,success,datatype一次写入，不用写参数名)
        //与$.get方法一样，只是请求改为post
        //方式三(请求不同)
        // $.post(
        //         //顺序一定不能换
        //         "/ajax/checkUserServlet2",      //url
        //         {                               //data
        //           username:$("#uname").val(),
        //           date:new Date()  //防止缓存
        //         },
        //         function (data,status,xhr){     //success
        //           console.log("$.post成功")
        //           console.log("data= ",data)
        //           console.log("status= ",status)
        //           console.log("xhr= ",xhr)
        //           if("" == data.username){ //已有，不可用
        //             $("#myres").val("该用户名可用")
        //           }else {
        //             $("#myres").val("该用户名不可用")
        //           }
        //           //data是json对象，要转成字符串
        //           $("#div1").html(JSON.stringify(data))
        //         },
        //         "json"                          //dataType
        // )
        //方式四 (一般工作中用方式二和方式三)
        $.getJSON( //
                //顺序一定不能换
                "/ajax/checkUserServlet2",      //url
                {                               //data
                  username:$("#uname").val(),
                  date:new Date()  //防止缓存
                },
                function (data,status,xhr){     //success
                  console.log("$.getJSON()成功")
                  console.log("data= ",data)
                  console.log("status= ",status)
                  console.log("xhr= ",xhr)
                  if("" == data.username){ //已有，不可用
                    $("#myres").val("该用户名可用")
                  }else {
                    $("#myres").val("该用户名不可用")
                  }
                  //data是json对象，要转成字符串
                  $("#div1").html(JSON.stringify(data))
                }
        )
      })
    })
  </script>
</head>
<body>
<h1>用户注册~ Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
  用户名字:<input type="text" name="username" id="uname">
  <input type="button" id="checkButton" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  用户密码:<input type="password" name="password"><br/><br/>
  电子邮件:<input type="text" name="email"><br/><br/>
  <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>